<template>
  <div>
    <ZhuYe :list='list' @add='add' @lo='lo' @dian="dian"/>
    <TanZuo v-show="flag" :list='list' @guan='guan' :obj='obj'/>
  </div>
  
</template>
<script>
import TanZuo from './components/tanzuo.vue'
import ZhuYe from './components/zheye.vue'
export default {
  name:'app',
  data () {
    
    return {
      flag:false,
      list:[
        {id:1,data:'2020-1-6',name:'赵豪',yin:'李四',namess:'糖尿病',jian:1,xin:1},
        {id:2,data:'2020-1-6',name:'张三',yin:'李五',namess:'癌症',jian:2,xin:2},
        {id:3,data:'2020-1-6',name:'李四',yin:'李三',namess:'性病',jian:1,xin:1}
      ],
      obj:{}
    }
  },
  created () {
    // localStorage.setItem('list',this.list)
  },
  mounted () {
    localStorage.setItem('list',JSON.stringify(this.list))
  },
  components:{
    TanZuo,
    ZhuYe
  },
  methods:{
    add(name){
       
      // console.log(id);
      console.log(name);
      this.list = this.list.filter(ele=>ele.name===name)
    },
    lo(){
      console.log(1);
      this.list = JSON.parse(localStorage.getItem('list'))
    },
    dian(id){
      // console.log(11);
      this.obj = this.list.filter(ele=>ele.id===id)[0]
      console.log(this.obj);
      this.flag = !this.flag
    },
    guan(){
      this.flag= false
    }
  },
  
}
</script>
<style scoped>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
</style>
